

/*********************
THE DEAL BREAKER - http://web-design-weekly.com/2013/04/10/why-you-scared-of-sass/
*********************/

/*
Usage:
#header {
  width: 75%;
  @include breakpoint(large) { width: 60%; }
  @include breakpoint(medium) { width: 80%; }
  @include breakpoint(small) { width: 95%; }
}
*/

@mixin breakpoint($point) {
  @if $point == large {
    @media (max-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (max-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (max-width: 37.5em)  { @content; }
  }
  @else if $point == hi-rez {
    @media (min-resolution 1.5dppx) { @content; }
  }
}


/*********************
RETINA IMAGES
*********************/

/* mixin for retina background images */
@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url('#{$imagesPath}' + $file + '.' + $type);

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
    & {
      background-image: url('#{$imagesPath}' + $file + '_@2X.' + $type);
      background-size: $width $height;
    }
  }
}


// $Pull Quotes
// --------------------------------------------------------------------------
// http://24ways.org/2005/swooshy-curly-quotes-without-images
//
// http://todomvc.com - Thanks sindresorhus!
// https://github.com/typeplate/typeplate.github.com/issues/49

/**
 * Pull Quotes Markup
 *
  <aside class="pull-quote">
    <blockquote>
      <p></p>
    </blockquote>
  </aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */

@mixin pull-quotes($font-size, $opacity) {
  position: relative;
  padding: ems($font-size, $font-size);
  &:before,
  &:after {
    height: ems($font-size, $font-size);
    opacity: $opacity;
    position: absolute;
    font-size: $font-size;
  }
  &:before {
    content: '“';
    top:  0em;
    left: 0em;
  }
  &:after {
    content: '”';
    bottom: 0em;
    right: 0em;
  }
}
